$(function() {
  let currentImg = 'none' // none  big  small

  const banners = [
    {
      id:0,
      bigUrl: './img/banner0.png',
      smUrl: './img/banner0_sm.png'
    },
    {
      id:0,
      bigUrl: './img/banner1.png',
      smUrl: './img/banner1_sm.png'
    },
    {
      id:0,
      bigUrl: './img/banner2.png',
      smUrl: './img/banner2_sm.png'
    }
  ];

  const bannerContainer = $('.carousel-inner')

  function renderBanner(banners = [], isBigScreen) {
    currentImg = isBigScreen ? 'big' : 'small' 

    // 先把之前的定时器停掉
    $('.carousel').carousel('dispose')
    
    $('.carousel-inner').empty()

    banners.forEach((item, index) => {
      const carouselItem = document.createElement("div");
      if (index === 0) {
        carouselItem.classList.add("carousel-item", "active"); // 添加active类
      } else {
        carouselItem.classList.add("carousel-item"); 
      }
      const img = document.createElement("img");
      if (currentImg === 'big') {
        img.src = item.bigUrl;
      } else {
        img.src = item.smUrl;
      }
      
      img.classList.add("d-block", "w-100");
      img.alt = "banner";
      carouselItem.appendChild(img);
      bannerContainer.append(carouselItem);
    })

    // 自动录播( 开始一个定时器 )
    $('.carousel').carousel('cycle')
  }

  $(window).on('resize', throttle(function() {
    const winWidth = $(this).outerWidth()
    const isBigScreen = winWidth >= 768

    if (currentImg === 'none') {
      renderBanner(banners, isBigScreen)
    }

    if(currentImg === 'big' && !isBigScreen) {
      renderBanner(banners, isBigScreen)
    }

    if(currentImg === 'small' && isBigScreen) {
      // 掉这个函数来渲染界面
      renderBanner(banners, isBigScreen)
    }
  }))
  $(window).trigger('resize')
})